Dynamic SVG Creation এবং Modification

এসভিজি (SVG) ফাইলগুলি সাধারণত ওয়েব পেজে স্ট্যাটিক গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। তবে, এসভিজি এর মাধ্যমে dynamic গ্রাফিক্স তৈরি এবং modification (সংশোধন) করাও সম্ভব। JavaScript এবং CSS ব্যবহার করে আপনি এসভিজি উপাদানগুলির মধ্যে ডায়নামিক পরিবর্তন আনতে পারেন, যেমন উপাদান যুক্ত করা, মুছে ফেলা, রঙ পরিবর্তন, বা আকার পরিবর্তন করা।

এসভিজি ফাইলের মধ্যে dynamic creation এবং modification ওয়েব ডেভেলপমেন্টে ব্যবহৃত হয়, বিশেষ করে ইন্টারঅ্যাকটিভ গ্রাফিক্স, অ্যানিমেশন, ডাটা ভিজুয়ালাইজেশন এবং গেম ডেভেলপমেন্টে। নিচে এসভিজি ক্রিয়েশন এবং সংশোধন করার জন্য কিছু জনপ্রিয় পদ্ধতি আলোচনা করা হলো।

১. JavaScript ব্যবহার করে Dynamic SVG Creation

JavaScript এর মাধ্যমে আপনি নতুন এসভিজি উপাদান তৈরি করতে পারেন এবং সেগুলি ওয়েব পেজে ইনজেক্ট (insert) করতে পারেন। createElementNS() পদ্ধতির মাধ্যমে এসভিজি উপাদানগুলো তৈরি করা হয়।

উদাহরণ: JavaScript দিয়ে একটি বৃত্ত (Circle) তৈরি

<svg id="mySVG" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG content will be dynamically added here -->
</svg>

<script>
  // Create a new circle element dynamically
  var svg = document.getElementById("mySVG");
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  
  // Set attributes for the circle
  circle.setAttribute("cx", "250");
  circle.setAttribute("cy", "250");
  circle.setAttribute("r", "50");
  circle.setAttribute("stroke", "black");
  circle.setAttribute("stroke-width", "4");
  circle.setAttribute("fill", "blue");

  // Append the circle to the SVG container
  svg.appendChild(circle);
</script>

ব্যাখ্যা:

• createElementNS("http://www.w3.org/2000/svg", "circle"): এটি এসভিজি নামস্পেসের মধ্যে একটি নতুন বৃত্ত তৈরি করে।
• setAttribute() এর মাধ্যমে বৃত্তের অবস্থান, আকার এবং রঙ নির্ধারণ করা হয়েছে।
• appendChild(circle): বৃত্তটিকে এসভিজি কন্টেইনারে যোগ করা হয়েছে।

২. Dynamic Modification of SVG Elements

আপনি JavaScript ব্যবহার করে বিদ্যমান এসভিজি উপাদানগুলির গুণগত পরিবর্তনও করতে পারেন, যেমন রঙ পরিবর্তন, আকার বাড়ানো বা কমানো, বা অবস্থান পরিবর্তন।

উদাহরণ: JavaScript দিয়ে SVG এর রঙ পরিবর্তন

<svg id="mySVG" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="250" cy="250" r="50" stroke="black" stroke-width="4" fill="blue" />
</svg>

<script>
  // Get the circle element
  var circle = document.getElementById("myCircle");
  
  // Change the fill color of the circle on click
  circle.addEventListener("click", function() {
    this.setAttribute("fill", "green");
  });
</script>

ব্যাখ্যা:

• এখানে addEventListener ব্যবহার করে ক্লিক ইভেন্ট ট্র্যাক করা হচ্ছে। ইউজার যখন বৃত্তের উপর ক্লিক করবে, তখন তার রঙ নীল থেকে সবুজ হয়ে যাবে।

৩. Dynamic SVG Animation with JavaScript

JavaScript দিয়ে আপনি এসভিজি উপাদানগুলির মধ্যে অ্যানিমেশনও তৈরি করতে পারেন। যেমন, একটি বৃত্তের আকার পরিবর্তন করা বা একটি অবজেক্টের পজিশন পরিবর্তন করা।

উদাহরণ: SVG Circle এর আকার পরিবর্তন করা

<svg id="mySVG" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="250" cy="250" r="50" stroke="black" stroke-width="4" fill="blue" />
</svg>

<script>
  var circle = document.getElementById("myCircle");
  
  // Animate the radius of the circle
  var radius = 50;
  setInterval(function() {
    radius += 5;
    circle.setAttribute("r", radius);
  }, 500); // Increase radius every 500ms
</script>

ব্যাখ্যা:

• প্রতি 500 মিলিসেকেন্ডে বৃত্তের রেডিয়াস (radius) 5 পিক্সেল বৃদ্ধি পাচ্ছে। এর ফলে বৃত্তটি ধীরে ধীরে বড় হচ্ছে।

৪. SVG এর মধ্যে নতুন উপাদান যোগ করা বা মুছে ফেলা

JavaScript ব্যবহার করে আপনি এসভিজি ফাইলে নতুন উপাদান যোগ করতে পারেন বা পুরানো উপাদান মুছে ফেলতে পারেন।

উদাহরণ: SVG এর মধ্যে নতুন রেকটেঙ্গল (Rectangle) যোগ করা

<svg id="mySVG" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- Existing content will be here -->
</svg>

<script>
  var svg = document.getElementById("mySVG");

  // Create a new rectangle dynamically
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute("x", "100");
  rect.setAttribute("y", "100");
  rect.setAttribute("width", "150");
  rect.setAttribute("height", "100");
  rect.setAttribute("fill", "purple");
  
  // Add the rectangle to the SVG
  svg.appendChild(rect);

  // Remove the rectangle after 3 seconds
  setTimeout(function() {
    svg.removeChild(rect);
  }, 3000);
</script>

ব্যাখ্যা:

• নতুন রেকটেঙ্গল (rectangle) তৈরি করা হয়েছে এবং এটি এসভিজি কন্টেইনারে যোগ করা হয়েছে।
• 3 সেকেন্ড পর removeChild(rect) এর মাধ্যমে রেকটেঙ্গলটি মুছে ফেলা হয়েছে।

৫. Dynamic Data Visualization with SVG

এসভিজি এর মাধ্যমে আপনি ডায়নামিক ডাটা ভিজুয়ালাইজেশনও তৈরি করতে পারেন। ডাটা ভিজুয়ালাইজেশন ওয়েবসাইটের গ্রাফ, চার্ট বা ড্যাশবোর্ডে জনপ্রিয়ভাবে ব্যবহৃত হয়। JavaScript ব্যবহার করে আপনি ডাইনামিক ডাটা ইনপুট দিয়ে এসভিজি গ্রাফিক্স তৈরি করতে পারেন।

উদাহরণ: Dynamic Bar Chart with SVG

<svg id="chart" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- Bar chart will be created here -->
</svg>

<script>
  var data = [80, 120, 150, 170, 200];  // Sample data

  var svg = document.getElementById("chart");
  var barWidth = 40;
  
  for (var i = 0; i < data.length; i++) {
    var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    bar.setAttribute("x", i * (barWidth + 10));
    bar.setAttribute("y", 500 - data[i]);
    bar.setAttribute("width", barWidth);
    bar.setAttribute("height", data[i]);
    bar.setAttribute("fill", "blue");

    svg.appendChild(bar);
  }
</script>

ব্যাখ্যা:

• একটি সিম্পল বার চার্ট তৈরি করা হয়েছে যেখানে প্রতিটি বার একটি নির্দিষ্ট ডাটা ভ্যালু থেকে আসছে। প্রতিটি বার এর উচ্চতা data[i] এর মান অনুসারে পরিবর্তিত হচ্ছে।

সারাংশ

এসভিজি (SVG) ফাইলগুলির dynamic creation এবং modification JavaScript এবং CSS ব্যবহার করে খুব সহজেই করা যেতে পারে। আপনি JavaScript দিয়ে এসভিজি উপাদানগুলির মধ্যে নতুন উপাদান যুক্ত করতে পারেন, তাদের গুণগত মান পরিবর্তন করতে পারেন, এবং বিভিন্ন অ্যানিমেশন বা ইন্টারঅ্যাকটিভ কার্যাবলী তৈরি করতে পারেন। এই কৌশলগুলি ওয়েব ডেভেলপমেন্ট, ডাটা ভিজুয়ালাইজেশন, এবং গেম ডেভেলপমেন্টে খুবই কার্যকরী এবং জনপ্রিয়।